<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
</head>
<body>
<div class="container-scroller d-flex">
    <div th:replace="includeJs::admin_leftNav"></div>

    <div class="container-fluid page-body-wrapper">
        <div th:replace="includeJs::admin_nav"></div>
        <div class="main-panel">
            <div class="content-wrapper">
                <div id="editWin" style="display: none">
                    <form id="editfrom"  lay-filter="editfrom"  class="layui-form">
                        <div class="layui-form-item" style="margin-top: 10px">
                            <input type="text" hidden name="orderId" />
                            <div class="layui-inline">
                                <label style="width: 130px;" class="layui-form-label">物流类型</label>
                                <div class="layui-input-inline">
                                    <select required name="logisticsCompany" lay-verify="required" lay-search="">
                                        <option value="">选择物流</option>
                                        <option value="顺丰">顺丰</option>
                                        <option value="韵达">韵达</option>
                                        <option value="中通">中通</option>
                                        <option value="圆通">圆通</option>
                                        <option value="京东">京东</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="edit" lay-filter="edit">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
                <table class="layui-hide" id="orderTable" lay-filter="orderTable"></table>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use([ 'element', 'table', 'layer', 'form' ,'laydate','upload','layedit'],function() {
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layedit = layui.layedit;

        table.render({
            elem: '#orderTable'
            ,url:'/MorderList'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [
                [
                    {field:'orderId', width:50, title: 'id'}
                    ,{field:'userName', width:100, title: '用户名'}
                    ,{field:'userPhone', width:150, title: '电话'}
                    ,{field:'userAddress', width:250, title: '地址'}
                    ,{field:'logisticsCompany', title: '物流公司', width: '100', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'orderState',width: '100', title: '货物状态',templet:function (d) {
                        if (d.orderState === [[${T(com.ddf.publics.tool.Constant).TO_BE_DELIVERED}]]) {
                            return '<button type="button" class="layui-btn layui-btn-xs">待发货</button>\n'
                        }else if(d.orderState === [[${T(com.ddf.publics.tool.Constant).SHIPPED}]]) {
                            return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs">已发货</button>\n'
                        }else if(d.orderState === [[${T(com.ddf.publics.tool.Constant).TO_BE_RECEIVED}]]){
                            return '<button type="button" class="layui-btn layui-btn-warm layui-btn-xs">待收货</button>\n'
                        }else if(d.orderState === [[${T(com.ddf.publics.tool.Constant).RECEIVED}]]){
                            return '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs">已收货</button>\n'
                        }
                    }}
                    ,{field:'deliveryTime',width: '150',templet:function (d) {
                            if(d.deliveryTime == null || d.deliveryTime == ''){
                                return ""
                            }else {
                               return layui.util.toDateString(d.deliveryTime, "yyyy-MM-dd HH:mm:ss")
                            }
                    }, title: '发货时间'}
                    ,{field:'receivingTime',width: '150',templet:function (d) {
                            if(d.receivingTime == null || d.receivingTime == ''){
                                return ""
                            }else {
                                return layui.util.toDateString(d.receivingTime, "yyyy-MM-dd HH:mm:ss")
                            }
                    }, title: '收货时间'}
                    ,{field:'remarks',width: '100', title: '备注'}
                    ,{field:'orderState',templet:function (d) {
                        if(d.orderState == 1){
                            return "<input hidden class='orderId' value="+d.orderId+" /><button lay-event=\"update\" id='confirm' class=\"layui-btn layui-btn-sm layui-btn-danger\" ><i class=\"layui-icon layui-icon-edit\"></i>审核</button>";
                        }else {
                            return "<button disabled lay-event=\"update\" class=\"layui-btn layui-btn-sm layui-btn-disabled\" ><i class=\"layui-icon layui-icon-edit\"></i>审核</button>";
                        }
                    },fixed: 'right',width: '130',title: '操作'}
                ]
            ]
            ,page: true
            ,page: {limit:10,page:1,limits:[10,30,50,100],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
        });

        $(".layui-table").on('click','#confirm',function () {
            console.log($(this).prevAll(".orderId").val());
            $("[name = orderId]").val($(this).prevAll(".orderId").val());
            layer.open({
                type: '1',
                area: ["400px","200px"],
                title: '添加地址',
                closeBtn: 1, //不显示关闭按钮
                fixed: false, //不固定
                shadeClose: false, //开启遮罩关闭
                content: $('#editWin'),
                cancel:function(index, layero){
                    $("#editfrom")[0].reset();
                    layui.form.render();
                    layer.close(index);
                    table.reload('orderTable');
                }
            });
        })

        form.on('submit(edit)',function (data) {
            $.post('/admin/OrderEdit',{logisticsCompany:data.field.logisticsCompany,orderId:data.field.orderId},function (d) {
                if(d == 'yes'){
                    layer.msg("完成",{icon:1})
                }else if(d == 'no'){
                    layer.msg("输入有误",{icon:2})
                }
            });
        });
    });
</script>
</html>